<template>
    <view :style="colorStyle">
        <view class='my-promotion'>
            <view class="header">
                <view class='name acea-row row-center-wrapper'>
                    <!-- 当前佣金 -->
                    <view>
                      <view>总津贴:{{proxyInfo.total_price ||0}}</view>
                        <view class="user-msg">
                            <image class="avatar" :src="userInfo.avatar" mode=""></image>
                            <view class="nickname">{{userInfo.nickname}}</view>
                            <view class="level" @click="jumbPath">
                                立即提现
                                <text class='iconfont icon-xiangyou'></text>
                            </view>

                          <view>邀请码:{{proxyInfo.invitation_code || '无'}}</view>
                        </view>
                    </view>
                </view>
                <view class='num'>{{userInfo.brokerage_price}}</view>
                <view class='profit acea-row row-between-wrapper'>
                    <view class='item'>
                        <view>现有津贴</view>
<!--                        <view class='money'>{{userInfo.yesterDay}}</view>-->
                        <view class='money'>{{proxyInfo.price || 0}}</view>
                    </view>
                    <view class='item'>
                        <view>提现金额</view>
<!--                        <view class='money'>{{userInfo.yesterDay}}</view>-->
                        <view class='money'>{{proxyInfo.price_extract}}</view>
                    </view>
                    <view class='item'>
                        <view>提现成功金额<text ></text></view>
<!--                        <view class='money'>{{userInfo.extractTotalPrice}}</view>-->
                        <view class='money'>{{userInfo.price_success}}</view>
                    </view>
                </view>
            </view>
<!--            &lt;!&ndash; #ifdef APP-PLUS || H5 &ndash;&gt;-->
<!--            <navigator url="/pages/users/user_cash/index" hover-class="none" class='bnt bg-color'>立即提现</navigator>-->
<!--            &lt;!&ndash; #endif &ndash;&gt;-->
<!--            &lt;!&ndash; #ifdef MP &ndash;&gt;-->
<!--            <view @click="openSubscribe('/pages/users/user_cash/index')" class='bnt bg-color'>立即提现</view>-->
<!--            &lt;!&ndash; #endif &ndash;&gt;-->
            <view class='list acea-row row-between-wrapper'>
                <navigator url='/pages/proxy/code/index' hover-class="none" class='item acea-row row-center-wrapper row-column'>
                    <text class='iconfont icon-erweima'></text>
                    <view>推广名片</view>
                </navigator>
                <navigator url='/pages/proxy/proxy_list/index' hover-class="none" class='item acea-row row-center-wrapper row-column'>
                    <text class='iconfont icon-tongji'></text>
                    <view>推广统计</view>
                </navigator>
<!--                <navigator url='/pages/proxy/order_list/index?type=2' hover-class="none" class='item acea-row row-center-wrapper row-column'>-->
<!--                    <text class='iconfont icon-qiandai'></text>-->
<!--                    <view>佣金明细</view>-->
<!--                </navigator>-->
              <navigator url='/pages/proxy/subsidy/index' hover-class="none" class='item acea-row row-center-wrapper row-column'>
                <text class='iconfont icon-qiandai'></text>
                <view>津贴明细</view>
              </navigator>
                <navigator url='/pages/proxy/extract_list/index' hover-class="none"  class='item acea-row row-center-wrapper row-column'>
                    <text class='iconfont icon-dingdan'></text>
                    <view>提现记录</view>
                </navigator>
            </view>
        </view>
        <!-- #ifdef MP -->
        <!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
        <!-- #endif -->
        <!-- #ifndef MP -->
        <home></home>
        <!-- #endif -->
    </view>
</template>

<script>
    import {
        getProxyInfo
    } from '@/api/proxy.js';
    import {
        openExtrctSubscribe
    } from '@/utils/SubscribeMessage.js';
    import {
        toLogin
    } from '@/libs/login.js';
    import {
        mapGetters
    } from "vuex";
    // #ifdef MP
    import authorize from '@/components/Authorize';
    // #endif
    import home from '@/components/home';
    import colors from '@/mixins/color.js'
    export default {
        components: {
            // #ifdef MP
            authorize,
            // #endif
            home
        },
        mixins: [colors],
        data() {
            return {
                proxyInfo:[],
                userInfo: [],
                yesterdayPrice: 0.00,
                isAuto: false, //没有授权的不会自动授权
                isShowAuth: false //是否隐藏授权
            };
        },
        computed: mapGetters(['isLogin']),
        watch: {
            isLogin: {
                handler: function(newV, oldV) {
                    if (newV) {
                        this.getProxyInfo();
                    }
                },
                deep: true
            }
        },
        onShow() {
            if (this.isLogin) {
                this.getProxyInfo()
            } else {
                toLogin();
            }
        },
        methods: {
			/**
			 * 获取代理信息
			 */
			getProxyInfo: function() {
				let that = this;
				getProxyInfo().then(res => {
					that.$set(that, 'userInfo', res.data);
					this.proxyInfo = res.data
					if (res.data.check !== 1) {
						that.$util.Tips({
							title: "您目前暂无推广权限"
						}, {
							tab: 2,
							url: '/pages/proxy/apply/index'
						});
					}
				});
			},
			
            onLoadFun: function() {
                this.getProxyInfo();
            },
            //跳转
            jumbPath(type) {
                if (type == 1) {
                    uni.navigateTo({
                        // 提现记录
                        url: '/pages/users/user_spread_money/index?type=1'
                        // url: '/pages/users/user_cash/index'
                    })
                } else {
                    uni.navigateTo({
                        // 提现
                        // url: '/pages/users/user_distribution_level/index'
                        url: '/pages/users/user_cash/index?type=1'
                    })
                }
            },
            // 授权关闭
            authColse: function(e) {
                this.isShowAuth = e
            },
            openSubscribe: function(page) {
                uni.showLoading({
                    title: '正在加载',
                })
                openExtrctSubscribe().then(res => {
                    uni.hideLoading();
                    uni.navigateTo({
                        url: page,
                    });
                }).catch(() => {
                    uni.hideLoading();
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .my-promotion .header {
        // background-image: url("");
        background-image: url("");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 375rpx;
        background-color: var(--view-theme);
    }

    .my-promotion .header .name {
        font-size: 30rpx;
        color: #fff;
        padding-top: 57rpx;
        position: relative;

        .distribution {
            height: 52rpx;
            background-color: #ccc;
            font-size: 24rpx;
            color: #fff;
            position: absolute;
            right: 0;
            border-radius: 30rpx 0 0 30rpx;
            padding: 0 5rpx 0 10rpx;

            &.on {
                background-color: #FFF9E3;
                color: #D16739;
            }

            .iconfont {
                font-size: 18rpx;
            }

            .icon-dengjitubiao {
                font-size: 32rpx;
                margin-right: 10rpx;
            }
        }

        .user-msg {
            display: flex;
            align-items: center;

            .nickname {
                font-size: 28rpx;
            }

            .level {
                border: 1px solid #fff;
                font-size: 32rpx;
                padding: 2rpx 8rpx;
                border-radius: 6rpx;
                transform: scale(0.6);
                display: flex;
                align-items: center;

                .icon-xiangyou {
                    font-size: 28rpx;
                }
            }

            image {
                width: 46rpx;
                height: 46rpx;
                border-radius: 50%;
                margin-right: 10rpx;
            }
        }
    }

    .my-promotion .header .name .record {
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.8);
        position: absolute;
        right: 20rpx;
    }

    .my-promotion .header .name .record .iconfont {
        font-size: 25rpx;
        margin-left: 10rpx;
        vertical-align: 2rpx;
    }

    .my-promotion .header .num {
        text-align: center;
        color: #fff;
        margin-top: 28rpx;
        font-size: 90rpx;
        font-family: 'Guildford Pro';
    }

    .my-promotion .header .profit {
        padding: 0 20rpx;
        margin-top: 35rpx;
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.8);
    }

    .my-promotion .header .profit .item {
        min-width: 200rpx;
        text-align: center;
    }

    .my-promotion .header .profit .item .iconfont {
        font-size: 18rpx;
        color: #fff;
        margin-top: 5rpx;
    }

    .my-promotion .header .profit .item .money {
        font-size: 34rpx;
        color: #fff;
        margin-top: 5rpx;
    }

    .my-promotion .bnt {
        font-size: 28rpx;
        color: #fff;
        width: 258rpx;
        border-radius: 50rpx;
        text-align: center;
        line-height: 68rpx;
        margin: -32rpx auto 0 auto;

        border: 16rpx solid #f5f5f5;
    }

    .my-promotion .list {
        padding: 0 20rpx 50rpx 20rpx;
        margin-top: 10rpx;
    }

    .my-promotion .list .item {
        width: 345rpx;
        height: 240rpx;
        border-radius: 20rpx;
        background-color: #fff;
        margin-top: 20rpx;
        font-size: 30rpx;
        color: #666;
    }

    .my-promotion .list .item .iconfont {
        font-size: 70rpx;
        // background-image: linear-gradient(to right, #fc4d3d 0%, #e93323 100%);
        background-color: var(--view-theme);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 20rpx;
    }
</style>
